<template>
	<view class="home">
		<swiper autoplay indicator-dots indicator-color="white" interval="2000">
			<swiper-item v-for="item in banner" :key="item.id">
				<img :src="item.image_url" alt="" style="width: 100%;height: 100%;">
			</swiper-item>
		</swiper>
		<ul>
			<li v-for="item in channel" :key="item.id">
				<img :src="item.icon_url" alt="" @click="goCate(item.id)">
				<p>{{item.name}}</p>
			</li>
		</ul>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: [],
				channel: []
			}
		},
		methods: {
			async getBanner() {
				let {
					data: res
				} = await this.$http.get('http://shop.bufantec.com/bufan/index/index')
				this.banner = res.banner
				this.channel = res.channel
			},
			goCate(id) {
				wx.navigateTo({
					url: '../list/list?id=' + id
				})
			}
		},
		onLoad() {
			this.getBanner()
		}
	}
</script>

<style lang="scss">
	.home {
		width: 100%;
		height: 100%;

		ul {
			width: 100%;
			height: 200rpx;
			// background-color: red;
			display: flex;

			li {
				flex: 1;
				// background-color: yellow;
				text-align: center;

				img {
					width: 60%;
					height: 40%;
				}
			}
		}
	}
</style>
